<template>
	<view class="height-screen">
		<view class="absolute" style="height: 100vh;width: 100vw;background: #FFFFFF;" />
		<cu-custom isBack>
			<block slot="content">{{$t('mine.pullNew')}}</block>
		</cu-custom>
		<view class="grid margin-ht" style="gap: 50rpx;margin-top: 20rpx;">
			<view class="flex justify-end align-center" @tap.stop="helper.routerNav('/pages/mine/pullNewDetail')">
				<image src="@/static/img/detail.png" style="width: 23rpx;height: 28rpx;" />
				<text class="text-df font-400 margin-left-sm"
					style="color: #06C168;">{{$t('filed.myPullDetail')}}</text>
			</view>

			<image class="shareBannerimg" src="/static/img/shareBanner.png" mode=""></image>

			<view v-if="lang == 'zh-cn'" class="">
				<view class="shareTitle">
					邀请好友购买获得优惠券
				</view>
				<view class="shareDesc">
					当您邀请好友购买,您与好友都会获得优惠券。
				</view>

				<view class="listContent">
					<image src="/static/img/shareicon01.png" mode=""></image>
					<view class="listContentright">
						<view class="listTitle">
							您会获得$2.99的折扣券。
						</view>
						<view class="listDesc">
							最低购买额度$20(受条款限制)。
						</view>

					</view>
				</view>

				<view class="listContent">
					<image src="/static/img/shareicon02.png" mode=""></image>
					<view class="listContentright">
						<view class="listTitle">
							您的好友也会获得$2.99的折扣券。
						</view>
						<view class="listDesc">
							最低购买额度$20(受条款限制)。
						</view>
					</view>
				</view>

			</view>


			<view v-if="lang == 'en'" class="">
				<view class="shareTitle">
					Invite friends to order, get both coupons.
				</view>
				<view class="shareDesc">
					When friends use your code, they and you both receive discount coupon.</text>
				</view>

				<view class="listContent">
					<image src="/static/img/shareicon01.png" mode=""></image>
					<view class="listContentright">
						<view class="listTitle">
							You will receive a $2.99 Discount Coupon.
						</view>
						<view class="listDesc">
							<view class="">
								Minimum order amount $20.
							</view>
							<view class="">
								Terms and conditions apply.
							</view>
						</view>
					</view>
				</view>

				<view class="listContent">
					<image src="/static/img/shareicon02.png" mode=""></image>
					<view class="listContentright">
						<view class="listTitle">
							They will also receive $2.99 Discount Coupon.
						</view>
						<view class="listDesc">
							<view class="">
								Minimum order amount $20.
							</view>
							<view class="">
								Terms and conditions apply.
							</view>
						</view>
					</view>
				</view>

			</view>


			<view class="inputContent" style="margin-top: 50rpx;">
				<view class="invitecode">
					{{userInfo.invite_code}}
				</view>
				<view class="copy" @click="handleCopy">
					{{$t('filed.copy')}}
				</view>
			</view>
			<view class="inputContent">
				<input type="text" v-model="shareCode" :placeholder="$t('user.shareTip')" />
				<view class="copy" @click="handleSubmit">
					{{$t('public.release')}}
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		poster,
		getInfo,
		set_invited
	} from '@/apis'
	import {
		getSharePoster
	} from '@/components/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				posterInfo: {},
				finalPath: '',
				userInfo: {},
				shareCode: "",
				lang: "",
			}
		},
		onShow() {
			this.shareFc()
			this.lang = uni.getStorageSync('lang')
		},
		methods: {
			handleCopy() {
				let that = this
				uni.setClipboardData({
					data: that.userInfo.invite_code + "",
					success: function() {
						uni.showToast({
							title: that.$t('user.copytip')
						})
					}
				});
			},
			async shareFc() {
				this.userInfo = await getInfo()
			},
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.finalPath,
					success: (res) => {
						this.helper.showToast(this.$t('message.success'))
					}
				})
			},
			async handleSubmit() {
				if (this.shareCode == "") {
					this.helper.showToast(this.$t('user.shareTip'))
					return
				}
				let tes = await set_invited({
					invite_code: this.shareCode
				})
				this.helper.showToast(this.$t('message.success'))
				if (res.code == 1) {
					this.shareCode = ""
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.hideCanvasView {
		position: relative;
	}

	.shareBannerimg {
		width: 100%;
		height: 250rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.shareTitle {
		font-size: 50rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}

	.shareDesc {
		font-size: 26rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.listContent {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 40rpx;

		image {
			width: 50rpx;
			height: 30rpx;
		}

		.listContentright {
			width: 95%;
			margin-left: 30rpx;
			font-size: 26rpx;

			.listTitle {
				font-weight: bold;
			}

			.listDesc {
				margin-top: 10rpx;
			}
		}
	}

	.inputContent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		border-radius: 10rpx;
		background-color: #F3F3F3;
		padding: 0 30rpx;
		box-sizing: border-box;

		input {
			width: 70%;
		}

		.invitecode {
			font-weight: bold;
		}

		.copy {
			padding: 0 20rpx;
			height: 60rpx;
			border-radius: 60rpx;
			background-color: #ffffff;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.userInfoContent {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;

		.nikeName {
			color: rgb(6, 193, 104);
			font-size: 50rpx;
			font-weight: bold;
		}

		image {
			width: 550rpx;
			height: 550rpx;
			border-radius: 500rpx;
			margin-top: 30rpx;
		}

		.codeNum {
			margin: 0 50rpx;
			color: rgb(6, 193, 104);
			font-size: 50rpx;
			font-weight: bold;
			margin-top: 30rpx;

		}

		.copy {
			margin-top: 30rpx;
			padding: 0 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			background-color: rgb(6, 193, 104);
			color: #ffffff;


		}

		.shareContent {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-top: 50rpx;

			.inputItem {
				width: 70%;
				height: 80rpx;
				border-radius: 50rpx;
				border: 1rpx solid rgb(6, 193, 104);
				background-color: #ffffff;
				font-size: 25rpx;
				padding-left: 30rpx;
			}

			.submitBtn {
				padding: 0 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 80rpx;
				background-color: rgb(6, 193, 104);
				color: #ffffff;
				margin-left: 30rpx;
			}
		}
	}
</style>